<!DOCTYPE html>
<html lang="zh">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>大乐透号码生成器</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            margin-top: 50px;
        }
        .container {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            margin-top: 20px;
        }
        .module {
            flex: 1;
            margin: 10px;
            border: 1px solid #ddd;
            padding: 20px;
            border-radius: 8px;
        }
        .module-large {
            flex: 2;
        }
        .number-set {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 10px;
        }
        .ball {
            display: inline-block;
            width: 40px;
            height: 40px;
            line-height: 40px;
            border-radius: 50%;
            margin: 5px;
            font-weight: bold;
            text-align: center;
        }
        .ball.front {
            background-color: #007bff; /* 深蓝色 */
            color: #fff; /* 白色字体 */
        }
        .ball.back {
            background-color: #ffc107; /* 黄色 */
            color: #371F49; /* 深色字体 */
        }
        .input-set input {
            width: 40px;
            height: 40px;
            text-align: center;
            margin: 5px;
            border: none;
            font-size: 16px;
            border-radius: 50%;
        }
        .input-set input.front {
            background-color: #cce5ff; /* 浅蓝色 */
            color: #fff; /* 白色字体 */
        }
        .input-set input.back {
            background-color: #fff3cd; /* 浅黄色 */
            color: #371F49; /* 深色字体 */
        }
        input[type=number]::-webkit-outer-spin-button,
        input[type=number]::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }
        input[type=number] {
            -moz-appearance: textfield;
        }
        button {
            margin-top: 10px;
            padding: 10px 20px;
            border: none;
            background-color: #5bc0de;
            color: white;
            font-size: 16px;
            cursor: pointer;
            border-radius: 4px;
        }
        button:hover {
            background-color: #46b8da;
        }
        .copy-button {
            margin-left: 10px;
            padding: 5px 10px;
            background-color: #5bc0de;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        .probability {
            margin-left: 20px;
            font-size: 14px;
            color: #333;
        }
    </style>
</head>
<body>
    <input type="text" id="hidden-input" style="position: absolute; left: -9999px;">
    <h1>大乐透号码生成器</h1>
    <div class="container">
        <div class="module module-large">
            <h2>生成号码</h2>
            <button onclick="generateNumbers()">生成号码</button>
            <button onclick="copyAllNumbers('numbers')">复制全部号码</button>
            <div id="numbers"></div>
        </div>
        <div class="module">
            <h2>随机生成的号码</h2>
            <button onclick="generateRandomNumbers()">生成随机号码</button>
            <button onclick="copyAllNumbers('random-numbers')">复制全部号码</button>
            <div id="random-numbers"></div>
            <!-- <h2>输入你的号码</h2>
            <div class="input-set">
                <input type="number" class="front" id="input1" min="1" max="35" oninput="moveToNext(this, 'input2')">
                <input type="number" class="front" id="input2" min="1" max="35" oninput="moveToNext(this, 'input3')">
                <input type="number" class="front" id="input3" min="1" max="35" oninput="moveToNext(this, 'input4')">
                <input type="number" class="front" id="input4" min="1" max="35" oninput="moveToNext(this, 'input5')">
                <input type="number" class="front" id="input5" min="1" max="35">
                <input type="number" class="back" id="input6" min="1" max="12" oninput="moveToNext(this, 'input7')">
                <input type="number" class="back" id="input7" min="1" max="12">
            </div>
            <button onclick="scoreNumbers()">提交号码</button> -->
            <div id="score"></div>
        </div>
    </div>

    <script>
        function moveToNext(current, nextFieldID) {
            if (current.value.length >= current.max.length) {
                document.getElementById(nextFieldID).focus();
            }
        }

        function generateNumbers() {
            const numbersDiv = document.getElementById('numbers');
            numbersDiv.innerHTML = '';  // 清空现有号码
            for (let i = 0; i < 10; i++) {
                const numberSet = generateNumberSet();
                const numberSetDiv = document.createElement('div');
                numberSetDiv.classList.add('number-set');

                numberSet.forEach((num, idx) => {
                    const ball = document.createElement('span');
                    ball.classList.add('ball');
                    ball.textContent = num;
                    if (idx < 5) {
                        ball.classList.add('front');
                    } else {
                        ball.classList.add('back');
                    }
                    numberSetDiv.appendChild(ball);
                });

                // 显示判别器计算的概率（这里假设概率为100%）
                const probText = document.createElement('span');
                probText.className = 'probability';
                probText.textContent = `幸运度: 100.00%`;
                numberSetDiv.appendChild(probText);

                // 添加复制按钮
                const copyButton = document.createElement('button');
                copyButton.classList.add('copy-button');
                copyButton.textContent = '复制';
                copyButton.onclick = () => copyNumbers(numberSet);
                numberSetDiv.appendChild(copyButton);

                numbersDiv.appendChild(numberSetDiv);
            }
        }

        function generateRandomNumbers() {
            const randomNumbersDiv = document.getElementById('random-numbers');
            randomNumbersDiv.innerHTML = '';  // 清空现有号码
            for (let i = 0; i < 5; i++) {
                const numberSet = generateNumberSet();
                const numberSetDiv = document.createElement('div');
                numberSetDiv.classList.add('number-set');

                numberSet.forEach((num, idx) => {
                    const ball = document.createElement('span');
                    ball.classList.add('ball');
                    ball.textContent = num;
                    if (idx < 5) {
                        ball.classList.add('front');
                    } else {
                        ball.classList.add('back');
                    }
                    numberSetDiv.appendChild(ball);
                });

                // 添加复制按钮
                const copyButton = document.createElement('button');
                copyButton.classList.add('copy-button');
                copyButton.textContent = '复制';
                copyButton.onclick = () => copyNumbers(numberSet);
                numberSetDiv.appendChild(copyButton);

                randomNumbersDiv.appendChild(numberSetDiv);
            }
        }

        function generateNumberSet() {
            const frontNumbers = getRandomNumbers(1, 35, 5);
            const backNumbers = getRandomNumbers(1, 12, 2);
            return [...frontNumbers, ...backNumbers];
        }

        function getRandomNumbers(min, max, count) {
            const numbers = new Set();
            while (numbers.size < count) {
                const num = Math.floor(Math.random() * (max - min + 1)) + min;
                numbers.add(num);
            }
            return Array.from(numbers);
        }

        function copyNumbers(numbers) {
            const text = numbers.join(' ');
            const hiddenInput = document.getElementById('hidden-input');
            hiddenInput.value = text;
            hiddenInput.select();
            try {
                document.execCommand('copy');
                alert('号码已复制: ' + text);
            } catch (err) {
                console.error('无法复制号码', err);
            }
        }

        function copyAllNumbers(containerId) {
            const container = document.getElementById(containerId);
            const text = Array.from(container.querySelectorAll('.number-set')).map(set => {
                return Array.from(set.querySelectorAll('.ball')).map(ball => ball.textContent).join(' ');
            }).join('\n');
            const hiddenInput = document.getElementById('hidden-input');
            hiddenInput.value = text;
            hiddenInput.select();
            try {
                document.execCommand('copy');
                alert('全部号码已复制');
            } catch (err) {
                console.error('无法复制号码', err);
            }
        }

        function scoreNumbers() {
            const numbers = [
                parseInt(document.getElementById('input1').value),
                parseInt(document.getElementById('input2').value),
                parseInt(document.getElementById('input3').value),
                parseInt(document.getElementById('input4').value),
                parseInt(document.getElementById('input5').value),
                parseInt(document.getElementById('input6').value),
                parseInt(document.getElementById('input7').value)
            ];

            // 这里假设有一个简单的评分逻辑，可以根据需要修改
            const score = calculateScore(numbers);
            const scoreDiv = document.getElementById('score');
            scoreDiv.textContent = `你的号码的幸运度: ${(score * 100).toFixed(2)}%`;
        }

        function calculateScore(numbers) {
            // 简单的评分逻辑，可以根据需要修改
            return Math.random();
        }

        document.addEventListener('DOMContentLoaded', generateNumbers);
        document.addEventListener('DOMContentLoaded', generateRandomNumbers);
    </script>
</body>
</html>